﻿<%@ Page Title="城市企划区域" Language="C#" MasterPageFile="~/master/m.master" %>

<script runat="server">

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
.system-box .right-side{
	width: 100%;
}
.content-container{
	background: #fff;
	width: 600px;
	padding: 8px;
	margin: 10px auto;
	border: 1px solid #dfdfdd;
}
.control-box p{
	margin: 0;
	overflow: hidden;
}
.content-container .areas,
.content-container .citySearch{
	margin: 10px 0 0 0;
	width: 250px;
	display: inline-block;
}
.content-container .title{
	margin-left: 74px;
}

.chooseArea{
	overflow: hidden;
}
.chooseArea .leftArea,
.chooseArea .rightArea{
	width: 250px;
	border: 1px solid #e5e6e7;
	float: left;
	margin-top: 10px;
	height: 300px;
	overflow: auto;
}
.chooseArea .leftArea p,
.chooseArea .rightArea p{
	text-align: center;
	margin: 0;
	padding: 3px 0;
	border-bottom: 1px solid #e5e6e7;
	cursor: pointer;
}
.chooseArea .leftArea p.even,
.chooseArea .rightArea p.even{
	background: #f7f7f7;
}
.chooseArea .leftArea p.check,
.chooseArea .rightArea p.check{
	background: #1ab394;
	color: #fff;
}
.chooseArea .btnArea{
	margin-top: 10px;
	width: 80px;
	height: 300px;
	float: left;
	position: relative;
}
.chooseArea .btnArea .add,
.chooseArea .btnArea .remove{
	position: absolute;
	width: 50px;
    font-size: 26px;
    padding: 0;
    height: 30px;
    line-height: 28px;
    left: 50%;
    margin-left: -25px;
    outline: none;
}
.chooseArea .btnArea .add{
	top: 80px;
}
.chooseArea .btnArea .remove{
	top: 150px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="main" Runat="Server">
<div class="system-box">
	<div class="right-side">
		<div class="btns-container">
			<button type="button" id="save" class="btn btn-primary" >
				<i class="fa fa-floppy-o"></i>&nbsp;&nbsp;保存
			</button>
		</div>
		<div class="right-content-box">
			<div class="content-container">
				<div class="header-tips font-c-f00">
					<i class="fa fa-lightbulb-o"></i>
					温馨提示：可在文本框输入关键字对城市列表进行搜索。
				</div>
				<div class="control-box">
					<p>
						<select class="form-control m-b areas" style="width: 100%"></select>
					</p>
					<p>
						<input type="text" class="form-control citySearch" placeholder="在此输入关键字" />
						<label class="title">已选城市列表</label>
					</p>
				</div>
				<div class="chooseArea">
					<div class="leftArea"></div>
					<div class="btnArea">
						<button class="btn btn-primary add" type="button">
							<i class="fa fa-long-arrow-right"></i>
                    	</button>
                    	<button class="btn btn-danger remove" type="button">
							<i class="fa fa-long-arrow-left"></i>
                    	</button>
					</div>
					<div class="rightArea"></div>
				</div>
			</div>
		</div>
	</div>
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="footer" Runat="Server">
<script src="../assets/js/page/rScroll.js"></script>
<script>
$(document).ready(function(){
	//用于存放区域列表
	var areaList = [];
	//用于存放城市列表
	var cityList = [];
	
	//加载企划区域列表
	var loadAreas = function(){
		Y.API2('SysDict','GetList',{DictValue: 'area'},function(data){
			if(data.Success == false){
				swal(data.Message, '', 'error');
			}else{
				//添加到列表及下拉框
				data.map(function(item){
					if(item.DictValue != 'area'){
						areaList.push(item);
						$('.areas').append('<option value="'+ item.DictValue +'">'+ item.DictName +'</option>');
					}
				});
				if(areaList.length > 0){
					loadRelateList(areaList[0].DictValue);
				}
			}
		});	
	}
	
	//加载城市列表
	var loadCitys = function(isInit){
		cityList = [];
		Y.API2('CFARelations','CityList',{},function(data){
			if(data.Success == false){
				swal(data.Message, '', 'error');
			}else{
				data.map(function(item){
					cityList.push(item);
				});
				if(!isInit){
					layer.closeAll('dialog');
					swal('保存成功', '', 'success');
				}else{
					loadAreas();
				}
			}
		});
	}
	loadCitys(true);
	
	//加载根据企划区域获取设置的城市
	var loadRelateList = function(areaId){
		layer.msg('玩命加载中……', {icon: 16, shade: 0.5, time:0, maxWidth:200});
		$('.rightArea').empty();
		Y.API2('CFARelations', 'GetList', {AreaID: areaId}, function(data){
			layer.closeAll('dialog');
			if(data.Success == false){
				swal(data.Message, '', 'error');
			}else{
				var html  = '';
				data.map(function(item){
					html += '<p>';
					html += 	'<span class="text">'+ item.FullName +'</span>';
					html +=		'<input class="value" type="hidden" value="'+ item.AreaID +'" />';
					html += '</p>';
				});
				$('.rightArea').append(html);
				initLeftArea();
			}
		});
	}
	
	//初始化左侧城市列表
	var initLeftArea = function(){
		$('.leftArea').empty();
		cityList.map(function(item){
			var html  = '';
			var count = 0;
			$('.rightArea').children().each(function(){
				if(item.FullName == $(this).find('.text').text())
					return false;
				count ++;
			});
			if(!item.IsChoose && count == $('.rightArea').children().size()){
				//匹配输入框的值
				if(item.FullName.indexOf( $('.citySearch').val().trim() ) > -1){
					html += '<p>';
					html += 	'<span class="text">'+ item.FullName +'</span>';
					html +=		'<input class="value" type="hidden" value="'+ item.AreaID +'" />';
					html += '</p>';
					$('.leftArea').append(html);
				}
			}
		})
	}
	
	//选中或反选
	var chooseItem = function(el){
		$(el).on('click', 'p', function(){
			if($(this).hasClass('check'))
				$(this).removeClass('check');
			else
				$(this).addClass('check');
		});
	}
	chooseItem('.leftArea');
	chooseItem('.rightArea');
	
	//添加城市到已选列表
	$('.add').click(function(){
		$('.leftArea .check').each(function(){
			$(this).removeClass('check');
			$('.rightArea').append($(this));
		})
	});
	//移除已选列表项
	$('.remove').click(function(){
		$('.rightArea .check').each(function(){
			$(this).removeClass('check');
			$('.leftArea').append($(this));
		})
	});
	
	//选择区域变更
	$('.areas').change(function(){
		$('.citySearch').val('');
		loadRelateList($(this).val());
	});
	
	//输入框变更
	$('.citySearch').keyup(function(){
		initLeftArea();
	});
	
	//保存
	$('.btns-container').on('click', '#save', function(){
		if($('.rightArea .value').size() == 0){
			swal('至少要选择一个城市');
			return false;
		}
	
		var submitList = [];
		$('.rightArea .value').each(function(){
			submitList.push($(this).val());
		});
		layer.msg('玩命加载中……', {icon: 16, shade: 0.5, time:0, maxWidth:200});
		Y.API2('CFARelations', 'SetUp', {
			AreaID: $('.areas').val(),
			City: submitList
		},function(data){
			if(data.Success == false){
				swal(data.Message, '', 'error');
				layer.closeAll('dialog');
			}else{
				loadCitys(false);
			}
		})
	})
})
</script>
</asp:Content>

